<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="test">

    </div>

    <script type="text/babel">

       // 定义类式组件，则一定要继承
       class Demo extends React.Component{
            /*
                render 方法是放在哪里的？ --- Demo的原型对象上，供实例使用
                render 中的this是谁？   --- Demo的实例对象上
            */
            render(){
                console.log(this);//Demo类的实例对象 <=> Demo组件的实例对象 <=> Demo组件对象
               return <h2>我是类式组件(适用于【复杂组件】的定义)</h2>
            }
       }

       // 渲染组件到页面
       ReactDOM.render(<Demo/>,document.getElementById('test'))
    
       /*
            执行了REactDOM.render(<Demo/> ....) 后发生了什么？
            1、React解析组件标签，寻找Demo组件的定义位置
            2、React发现Demo组件使用类定义的 react创建了一个Demo的实例对象---d
            3、通过d去调用了render方法
       */
    </script>
</body>
</html> 